import React, { useState, useEffect } from 'react';
import { Dimensions, FlatList, StyleSheet, TouchableOpacity, Text, ToastAndroid, View, Image, ImageBackground, ScrollView } from 'react-native';
import { baseURL } from '../../context/AuthProvider';
import { MaterialIcons } from '@expo/vector-icons';
import moment from 'moment';
import { useAuth } from '../../context/AuthProvider';
import axios from '../../api/axios';

const Btn = ({ children, style, color, ...rest }) => {
    return (
        <TouchableOpacity {...rest} style={
            {
                justifyContent: 'center',
                alignItems: 'center',
                ...style
            }
        }>
            <Text style={{ color: color ? color : '#fff' }}>{children}</Text>
        </TouchableOpacity>
    )
}
// const { widthS, heightS } = Dimensions.get('window');
const screenW = Dimensions.get('window').width;
const screenH = Dimensions.get('window').height;

const Message = ({ navigation, route }) => {
    const { user } = useAuth();
    const [collectArr, setCollectArr] = useState([]);
    const message = route.params.item;
    const [w, setW] = useState(screenW);
    const [h, setH] = useState(screenH);
    const [color, setColor] = useState('')
    const [collectText, setCollectText] = useState('     收藏');
    const getimgW = (imageUri) => {
        // console.log(imageUri);
        Image.getSize(imageUri, (width, height) => {
            // console.log(width, height);
            setW(screenW * 0.89)
            setH((height * screenW * 0.89) / width)
            return {
                width: screenW * 0.89,
                height: (height * screenW * 0.89) / width,
                resizeMode: 'contain'
            }
        })
    }
    // 收藏帖子
    const collect = (id) => {
        if (collectArr.indexOf(id) > -1) { //删除已收藏 
            collectArr.splice(collectArr.indexOf(id), 1);
            console.log('删除成功，取消收藏');
            axios.post('/news/collect', {
                guideid: id,
                collected: false,
                userid: user.userid,
                collect_time: new Date().getTime()
            }).then(res => {
                if (res.code == 500) {
                    ToastAndroid.show("已取消收藏", 2000);
                    setColor(() => { return 'black' });
                    setCollectText(() => { return '     收藏' });
                }
            })
        } else { //未收藏 添加收藏
            collectArr.push(id);
            console.log('push成功，添加到收藏');
            axios.post('/news/collect', {
                guideid: id,
                collected: true,
                userid: user.userid,
                collect_time: new Date().getTime()
            }).then(res => {
                if (res.code == 200) {
                    setColor(() => { return 'rgb(255, 120, 74)' });
                    setCollectText(() => { return '     已收藏' });
                    ToastAndroid.show("收藏成功", 2000);
                }
            })
        }
        // console.log(collectArr);
    }
    useEffect(() => {
        axios.post('/guide/collectarr', {
            userid: user.userid,
        }).then(res => {
            console.log(collectArr);
            if (res.code == 200) {
                setCollectArr(res.data)
                for (let i = 0; i < res.data.length; i++) {
                    if (res.data[i] == message.guideid) {
                        setColor(() => { return 'rgb(255, 120, 74)' });
                        setCollectText(() => { return '     已收藏' });
                    }
                }
                // console.log(res.data);
                // console.log(99999);
            }
        })
    }, [])
    return (
        <View style={{ width: '100%', height: '100%' }}>
            <ScrollView style={{ width: '100%', height: '100%', backgroundColor: 'white' }}>
                <View style={{ alignItems: 'center' }}>
                    <Image
                        style={[{ width: w, height: h, resizeMode: 'contain' }, getimgW(baseURL + message.innerimg)]}
                        source={{ uri: message ? baseURL + message.innerimg : '' }}
                    />
                </View>
                <View style={{ alignItems: 'center' }}>
                    <Text style={{ fontSize: 19, fontWeight: 'bold', marginLeft: '3.3%', lineHeight: 60 }}>{message.title}</Text>
                    <View style={{width:'92%',alignItems:'flex-start',marginBottom:'5%'}}>
                        <Text style={{lineHeight:23}}>{message.content}</Text>
                    </View>
                    <View style={{ width: '95%', height: 50, flexDirection: 'row', alignItems: 'center' }}>
                        <Text style={{ color: 'grey' }}>阅读  {message.readnum}</Text>
                        <TouchableOpacity style={{ flexDirection: 'row', alignItems: 'center' }} onPress={() => collect(message.guideid)}>
                            <Text style={{ color: 'grey' }}>{collectText}</Text>
                            <MaterialIcons name="stars" size={24} color={color} />
                        </TouchableOpacity>
                    </View>
                </View>

            </ScrollView>
        </View>
    )
}

export default Message
